<!-- 教师详情 -->
<template>
  <div class="teacherInfo" style="padding: 10px;">
    <el-card class="card">
      <!-- 顶部编辑按钮 -->
      <!-- <div class="top_nav" v-if="pageType === 'details'">
        <div>
          <p @click="edit">
            <i class="iconfont icon-bianji1"></i>
            编辑
          </p>
        </div>
      </div> -->

      <!-- 顶部头像|保存退出 -->
      <div class="header_info">
        <div class="header_info_img">
          <el-upload
            v-if="pageType === 'details' ? false : true "
            :class="{ 'avatar-uploader': !imageUrl }"
            style="height: 40px;"
            :action="uploadFileURL"
            accept="image/jpeg,image/gif,image/png"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img v-if="pageType !== 'edit'" :src="imageUrl" />
        </div>
        <div class="header_info_config" style="padding-left: 14px;">
          <p>教师名称</p>
          <p>{{ formData.name }}</p>
        </div>
        <div
          class="save_info"
          v-if="pageType === 'edit' || pageType === 'create'"
        >
          <p @click="handleSubmit('teacherList')">
            <i class="iconfont icon-baocun"></i>
            保存
          </p>
          <p @click="goBack()">
            <i class="iconfont icon-close"></i>
            关闭
          </p>
        </div>
      </div>
    </el-card>
    <div class="empty"></div>
    <!-- 详情页面 -->
    <el-card class="tab" v-if="pageType === 'details'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <el-form-item label="用户名：" prop="username">
            <el-input
              v-model="formData.username"
              style="width: 218px;"
              placeholder="请填写用户名"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写姓名"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="密码：" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              style="width: 218px;"
              placeholder="请填写密码"
              :disabled="true"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="确认密码：" prop="cpassword">
            <el-input
              v-model="formData.cpassword"
              style="width: 218px;"
              placeholder="请填写密码"
              :disabled="true"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="邮箱：" prop="email">
            <el-input
              v-model="formData.email"
              style="width: 218px;"
              placeholder="请填写邮箱"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input
              v-model="formData.mobile"
              style="width: 218px;"
              placeholder="请填写手机号"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="职位：" prop="role_id" disabled>
            <el-select
              v-model="formData.role_id"
              placeholder="请选择职位"
              disabled
            >
              <el-option
                v-for="item in roleData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教师类型：" prop="type">
            <el-select
              v-model="formData.type"
              placeholder="请选择教师类型"
              disabled
            >
              <el-option
                v-for="item in teacherType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" v-text="formData.remark"></div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 编辑页面 -->
    <el-card class="tab" v-if="pageType === 'edit' || pageType === 'create'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <el-form-item label="用户名：" prop="username">
            <el-input
              v-model="formData.username"
              style="width: 218px;"
              placeholder="请填写用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写姓名"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码："
            prop="password"
            v-if="pageType === 'create'"
          >
            <el-input
              v-model="formData.password"
              style="width: 218px;"
              placeholder="请填写密码"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码："
            prop="cpassword"
            v-if="pageType === 'create'"
          >
            <el-input
              v-model="formData.cpassword"
              style="width: 218px;"
              placeholder="请填写密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input
              v-model="formData.email"
              style="width: 218px;"
              placeholder="请填写邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input
              v-model="formData.mobile"
              style="width: 218px;"
              placeholder="请填写手机号"
            ></el-input>
          </el-form-item>

          <el-form-item label="职位：" prop="type" disabled>
            <el-select v-model="formData.role_id" placeholder="请选择职位">
              <el-option
                v-for="item in roleData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教师类型：" prop="type">
            <el-select v-model="formData.type" placeholder="请选择教师类型">
              <el-option
                v-for="item in teacherType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" :model="formData.remark">
            <link-editor
              @editor-info="getEditorInfo"
              :editorInfo="formData.remark"
            ></link-editor>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { changeTitleMinin, detailsMinin } from "@/mixin";
import { uploadFileURL } from "@/utils/url";
import http from "@/api/teacher";
import globalApi from "@/api/global";
import { formatArray } from "@/utils";
import editor from "@/components/editor";
export default {
  name: "teacherInfo",
  mixins: [changeTitleMinin, detailsMinin],
  components: {
    linkEditor: editor
  },
  data() {
    var checkData = (rules, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("不能包含汉字"));
        } else if (value.length < 4) {
          callback(new Error("用户名要大于四位字符"));
        } else {
          callback();
        }
      }
      callback();
    };
    return {
      id: "",
      globalApi: globalApi,
      http: http,
      roleData: [],
      teacherType: [],
      rules: {
        username: [
          { required: true, message: "请填写姓名" },
          { validator: checkData, trigger: "blur" }
        ],
        name: [{ required: true, message: "请填写姓名" }],
        password: [{ required: true, message: "请填写姓名" }],
        cpassword: [
          { required: true, message: "请填写姓名" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.formData.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        mobile: [
          { required: true, message: "请填写手机号" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号填写有误",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        role_id: [{ required: true, message: "请选择职位", trigger: "blur" }],
        type: [{ required: true, message: "请选择教师类型", trigger: "blur" }]
      },
      sexList: [
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      pageType: "",
      uploadFileURL,
      imageUrl:
        "https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/weapp/images/defaultheadimg.png"
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getRole() {
      http.getRole().then(res => {
        this.roleData = res.data;
      });
    },
    getTeacherType() {
      let params = { varname: "teacher_type" };
      http.getTeacherType(params).then(res => {
        this.teacherType = res.data;
      });
    },
    getEditorInfo(data) {
      this.formData.remark = data;
    },
    handleAvatarSuccess(res, file) {
      console.log("res, file:", res, file);
      this.formData["headimgurl"] = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isPicture =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPicture) {
        this.$message.error("上传头像图片只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPicture && isLt2M;
    },
    edit() {
      this.pageType = "edit";
    },
    verifyCommonUnique(type) {
      let data = {};
      data[type] = this.formData[type];
      globalApi.verifyCommonUnique(data, "student").then(res => {
        // 调用主动验证
        // valid: false 为验证失败，已存在
      });
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      console.log("basicConfig:", basicConfig);

      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "teacherInfoParams",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("teacherInfoParams");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);
        this.id = pageParams.id;
        this.pageType = pageParams.pageType;
      }
      if (this.pageType === "edit" || this.pageType === "details") {
        http.getContentDetail({ id: this.id }).then(res => {
          console.log("res", res);
          this.formData = res.data;
          this.imageUrl = res.data.headimgurl;
        });
      }
    }
  },
  created() {
    this.init();
    this.getRole();
    this.getTeacherType();
  }
};
</script>

<style lang="scss" scoped>
.teacherInfo {
  .card /deep/.el-card__body {
    padding: 0;
  }
  .top_nav {
    padding-left: 34px;
    div {
      display: flex;
      padding: 25px 0;
      p {
        margin-right: 20px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
    }
  }
  .line {
    height: 1px;
    width: 100%;
    background: #bfbfbf;
  }
  .header_info {
    position: relative;
    padding: 26px 0 45px 34px;
    display: flex;
    &_img {
      width: 47px;
      height: 47px;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 47px;
        height: 47px;
      }
    }
    &_config {
      padding-left: 26px;
      padding-right: 26px;
      // border-right: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-of-type {
        border-right: none;
      }
      p {
        &:nth-of-type(1) {
          font-size: 14px;
          color: #565656;
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
          font-weight: 600;
        }
      }
    }
    .save_info {
      display: flex;
      position: absolute;
      right: 40px;
      top: 36px;
      p {
        margin-left: 20px;
        border-radius: 5px;
        cursor: pointer;
        &:nth-of-type(1) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
        &:nth-of-type(2) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 10px;
    background: #ebebeb;
  }
  .tab {
    padding: 0 34px;
    .config_num {
      display: flex;
      margin-bottom: 36px;
      p {
        padding: 8px 16px;
        border-radius: 5px;
        background: #ebf7ff;
        font-size: 14px;
        color: #72777a;
        margin-right: 12px;
        span {
          color: #6eb8f0;
        }
        // &:last-of-type {
        //     background: none;
        //     color: #6EB8F0;
        //     cursor: pointer;
        // }
      }
    }
    .info_title {
      display: flex;
      margin-bottom: 16px;
      position: relative;
      & > p {
        line-height: 36px;
        color: #999999;
        font-size: 18px;
        &:nth-of-type(1) {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          i {
            font-size: 20px;
            color: white;
          }
        }
      }
      div {
        position: absolute;
        right: 55px;
        display: flex;
        p {
          line-height: 36px;
          margin-left: 24px;
          cursor: pointer;
          i {
            font-size: 24px;
          }
        }
      }
    }
    .title_config {
      margin-bottom: 54px;
      ul {
        line-height: 47px;
        display: flex;
        list-style: none;
        padding-left: 47px;
        &:nth-of-type(1) {
          background: #f5f5f5;
          font-size: 16px;
          color: #333;
          font-weight: 600;
        }
        li {
          text-align: left;
          font-size: 14px;
          color: #565656;
          &:last-of-type {
            text-align: right;
            padding-right: 45px;
          }
        }
      }
    }
    .basic_title {
      width: 100%;
      line-height: 41px;
      background: #f5f5f5;
      padding-left: 24px;
      color: #333;
      font-size: 20px;
      font-weight: 600;
    }
    .basic_content {
      padding: 40px 0 44px 60px;
      padding-top: 40px;
      display: flex;
      flex-wrap: wrap;
      /deep/ .el-form-item {
        // width: 25%;
        font-weight: 600;
      }
      li {
        width: 25%;
        list-style: none;
        line-height: 45px;
        font-weight: 600;
        span {
          font-weight: 400;
        }
      }
    }
  }
  .create_chance {
    .business_pic {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 191px;
        height: 171px;
      }
    }
    .btn {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        width: 214px;
      }
    }
  }

  .latent_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .follow_customer {
    display: flex;
    width: 100%;
    .follow_form {
      width: 100%;
      /deep/ .el-upload-list {
        display: flex;
        li {
          width: 20%;
          margin-right: 10px;
          .el-upload-list__item-name {
            display: none;
          }
        }
      }
      .el-textarea {
        width: 491px;
      }
      .el-input {
        width: 179px;
      }
      .el-select {
        width: 179px;
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
}
</style>
